<template>
  <ScreenAdapter :width="5760" :height="1620">
    <div class="bg">
      <div class="top"></div>
      <div class="content">
        <div class="part1">
          <Part1/>
        </div>
        <div class="part2">
          <Part2/>
        </div>
        <div class="part3">
          <Part3/>
        </div>
      </div>
    </div>
  </ScreenAdapter>
</template>
  
<script lang='ts' setup>
import ScreenAdapter from '@/components/dpzj.vue'
import Part1 from '@/pages/content/part1.vue'
import Part2 from '@/pages/content/part2.vue'
import Part3 from '@/pages/content/part3.vue'

  
</script>
  
<style scoped lang='less'>
.bg{
  width: 100%;
  height: 100%;
  background-image:url('@/assets/img/background.jpg') ;
  background-size: cover;
}
.top{
  width: 100%;
  height: 135px;
  background-color: aquamarine;
  opacity: 0.3;
}
.content{
  display: flex;
  height: 100%;
  .part1{
    background-color: coral;
    opacity: 0.5;
    width: 28.5%;
    height: 1485px;
  }
  .part2{
    background-color: rgb(146, 152, 108);
    opacity: 0.5;
    width: 45%;
    height: 1485px;
  }
  .part3{
    background-color: rgb(192, 89, 218);
    opacity: 0.5;
    width: 26.5%;
    height: 1485px;
  }
}
</style>
